<template>
  <div>
    <!-- 补考申请 -->
    <van-overlay :show="open" @click="close" z-index="999">
      <div class="wrapper" @click.stop="close">
        <div class="chapterDetail" @click.stop>
          <div class="contain">
            <div class="titleLine rela">
              <div class="diaTitle">补考申请</div>
              <image class="closeicon abso" @click.stop="close"></image>
            </div>
            <div class="detail">
              <div class="item flex">
                <div class="lable">申请人</div>
                <div class="value">{{ info.studentName }}</div>
              </div>
              <div class="item flex">
                <div class="lable">当前分数</div>
                <div class="value">{{ info.score }}</div>
              </div>
              <div class="item flex">
                <div class="lable">申请课程</div>
                <div class="value">{{ info.courseName }}</div>
              </div>
              <div class="item flex">
                <div class="lable">申请任务</div>
                <div class="value">{{ info.chapterName }}</div>
              </div>

              <div class="item flex">
                <div class="lable">申请步骤</div>
                <div class="value">{{ info.taskName }}</div>
              </div>
            </div>
            <div class="flexbet btns">
              <div @click="errorButton" class="btn_close_dialog">重学课程</div>
              <div @click="confirm" class="btn_sure_dialog">同意补考</div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
  
<script>
import { getExamApplyInfoById, examApply } from "@/common/api/message";
export default {
  name: "makeupDia",
  props: {
    open: Boolean,
    keyId: [Number, String],
  },
  data() {
    return {
      info: {},
      reason: "",
    };
  },
  watch: {
    async open(e) {
      if (e) {
        let res = await getExamApplyInfoById(this.keyId);
        this.info = res.data;
        uni.hideTabBar();
      }
    },
  },
  methods: {
    /* 重学课程 */
    async errorButton() {
      let res = await examApply({
        id: this.info.examApplyId,
        auditStatus: 3,
      });
      uni.showToast({
        title: "重学课程成功",
        icon: "success",
        duration: 1500,
      });
      this.close();
    },
    async closeButton() {
      this.close();
    },
    /* 同意补考 */
    async confirm() {
      let res = await examApply({
        id: this.info.examApplyId,
        auditStatus: 1,
      });
      uni.showToast({
        title: "同意补考成功",
        icon: "success",
        duration: 1500,
      });
      this.close();
    },
    close() {
      uni.showTabBar();
      this.$emit("update:open", false);
    },
  },
};
</script>
  
<style scoped lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.chapterDetail {
  background-image: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/chapterbg.png");
  background-size: cover;
  border-radius: 24rpx;
  width: 608rpx;
  .contain {
    padding: 32rpx 48rpx 0 48rpx;
    .titleLine {
      text-align: center;
      .diaTitle {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
      }
      .closeicon {
        width: 30rpx;
        height: 30rpx;
        right: 40rpx;
        top: 40rpx;
      }
    }
    .detail {
      padding-top: 42rpx;
      .item {
        margin-top: 22rpx;
        .lable {
          text-align: right;
          width: 112rpx;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 40rpx;
        }
        .value {
          margin-left: 24rpx;
          word-wrap: break-word; /* 控制文字在单词内换行 */
          width: 340rpx;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
        }
      }
    }

    .btns {
      padding: 100rpx 30rpx 64rpx 30rpx;
      .btn_close_dialog {
        @include btn_plain(#ffffff, #333333) {
          width: 200rpx;
          height: 80rpx;
          border-radius: 40rpx;
          border: 2rpx solid #e5e5e5;
        }
      }
      .btn_error_dialog {
        @include btn_plain(#e95756, #ffffff) {
          width: 200rpx;
          height: 80rpx;
          border-radius: 40rpx;
          border: 2rpx solid #e95756;
        }
      }
      .btn_sure_dialog {
        @include btn_plain_line(
          linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
          #ffffff,
          #ff9a00
        ) {
          width: 200rpx;
          height: 80rpx;
          border-radius: 40rpx;
          margin-left: 48rpx;
        }
      }
    }
  }
}
</style>